<!DOCTYPE html>

<html lang="en" class="gr__materializecss_com">
<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-159559852-2"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-159559852-2');


    </script>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                                                          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                                                                                                    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                                                                                                        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-WQBQJWP');</script>
    <!-- End Google Tag Manager -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DJL Demo</title>
    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/codemirror.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/theme/dracula.min.css">
    <link href="https://djl.ai/website/css/style.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link rel="shortcut icon" type="image/x-icon" href="https://djl.ai/website/img/favicon.png"/>
    <link rel="shortcut icon" sizes="96x96" href="https://djl.ai/website/img/favicon.png">
    <link rel="apple-touch-icon" href="https://djl.ai/website/img/favicon.png">
</head>
<body data-gr-c-s-loaded="true">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WQBQJWP"
                    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<nav class="white" role="navigation">
    <div class="nav-wrapper">
        <div class="row">
            <a href="https://djl.ai" class="logo" id="logo-container">
                <img src="https://djl.ai/website/img/djl-middle.png">
            </a>
            <ul class="right col s10 hide-on-med-and-down">
                <li><a href="https://github.com/awslabs/djl">GitHub</a></li>
                <li><a href="https://docs.djl.ai/">Documentation</a></li>
                <li><a href="https://djl.ai/website/javadoc.html">JavaDoc</a></li>
                <li><a href="https://djl.ai/website/demo.html">Demos</a></li>
                <li><a href="https://djl.ai/website/blog.html">Blogs</a></li>
                <li><a href="https://docs.djl.ai/jupyter/tutorial/index.html">Tutorial</a></li>
                <li><a href="https://github.com/awslabs/djl/tree/master/examples">Examples</a></li>
                <li><a href="https://deepjavalibrary.slack.com">Slack</a></li>
            </ul>
            <ul id="nav-mobile" class="sidenav">
                <li><a href="https://github.com/awslabs/djl">GitHub</a></li>
                <li><a href="https://docs.djl.ai/">Documentation</a></li>
                <li><a href="https://djl.ai/website/javadoc.html">JavaDoc</a></li>
                <li><a href="https://djl.ai/website/demo.html">Demos</a></li>
                <li><a href="https://djl.ai/website/blog.html">Blogs</a></li>
                <li><a href="https://docs.djl.ai/jupyter/tutorial/index.html">Tutorial</a></li>
                <li><a href="https://github.com/awslabs/djl/tree/master/examples">Examples</a></li>
                <li><a href="https://deepjavalibrary.slack.com">Slack</a></li>
            </ul>
            <a data-target="nav-mobile"
               class="sidenav-trigger"><i class="material-icons">menu</i></a>
        </div>
    </div>
</nav>

<div class="blue-grey lighten-1">
    <div class="container white">
        <div class="section">
            <h1 class="header center light-blue-text text-accent-2">DJL Live Demos</h1>
            <div class="row center">
                <h5 class="header col s12 light">Experience Java to solve your DL problem in a simple way.</h5>
            </div>
            <div class="row center">
                <a href="https://github.com/aws-samples/djl-demo"
                   class="btn-large waves-effect waves-light light-blue accent-2">Checkout our repository</a>
                <a href="https://demodocs.djl.ai/"
                   class="btn-large waves-effect waves-light light-blue accent-2">Documentation</a>
            </div>
        </div>
    </div>
    <div class="container hide-on-med-and-down">
        <div class="card white z-depth-5">
            <div class="section">
                <div class="row">
                    <h3 class="center" id="jshell">Use online JShell to try out NDArray</h3>
                    <ul class="tabs black col s10 offset-s1">
                        <li class="tab col s3"><a href="#creation">Creation</a></li>
                        <li class="tab col s3"><a href="#math">Math Operation</a></li>
                        <li class="tab col s3"><a href="#manipulation">Data Manipulation</a></li>
                        <li class="tab col s3"><a href="#more">Learn More</a></li>
                    </ul>
                    <div id="creation" class="col s8 offset-s2">
                        <p><b>var array = manager.ones(new Shape(1,3,2))</b> to create a NDArray with shape 1,3,2</p>
                        <p><b>var array = manager.randomUniform(0, 1, new Shape(1, 1, 4))</b> to create a random uniform
                            NDArray
                        </p>
                    </div>
                    <div id="math" class="col s8 offset-s2">
                        <p><b>NDArray nd = manager.arange(1, 10).reshape(3, 3)</b> to create a NDArray and reshape to
                            3x3</p>
                        <p><b>nd = nd.transpose()</b> to transpose the NDArray</p>
                        <p><b>nd = nd.add(10)</b> add 10 to final result</p>
                    </div>
                    <div id="manipulation" class="col s8 offset-s2">
                        <p><b>NDArray nd = manager.arange(5, 14)</b> to create a NDArray from 5 to 14</p>
                        <p><b>nd = nd.get(nd.gte(10))</b> filter the value that are >=10</p>
                        <p><b>NDArray nd = manager.arange(1, 10).reshape(3, 3)</b> to create a NDArray with shape 3x3
                        </p>
                        <p><b>nd.set(new NDIndex(":, 1"), array -> array.mul(2));</b> Multiply the second column value
                            by 2</p>
                        <p>type <b>nd</b> to show the result</p>
                    </div>
                    <div id="more" class="col s8 offset-s2">
                        To learn more about NDArray and its methods, please checkout our <a
                            href="https://javadoc.io/doc/ai.djl/api/latest/ai/djl/ndarray/NDArray.html">NDArray
                        javadoc</a>.
                    </div>
                    <div class="col s8 offset-s2 card black z-depth-5">
                        <div id="terminal"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="card white z-depth-5">
            <div class="section">
                <div class="row center">
                    <h3 class="center" id="doodle">Try with Doodle Draw</h3>
                    <p>Live inference with AWS Lambda</p>
                    <div class="col s8 offset-s2 card black z-depth-5">
                        <canvas id="draw"></canvas>
                    </div>
                </div>
                <div class="row center">
                    <a class="waves-effect waves-light btn" onclick="clearMe()"><i class="material-icons left">cloud</i>clear</a>
                </div>
            </div>
        </div>
    </div>

    <div class="container hide-on-small-only">
        <div class="card white z-depth-5">
            <div class="section">
                <div class="row">
                    <h3 class="center" id="block-runner">DJL Block Runner</h3>
                    <p class="center">Test the code, Download the template, Run it locally.</p>
                    <ul class="col s10 offset-s1 collapsible">
                        <li>
                            <div class="collapsible-header"><i class="material-icons">filter_drama</i>Run Inference with DJL</div>
                            <div class="collapsible-body">
                                <script src="https://gist.github.com/lanking520/2eaaf3bba094b10aaffebd999bd4ae88.js"></script>
                                <p>You can copy with the code snippet above to run inference with MXNet. You can also try to change the Model URL to run inference on PyTorch and TensorFlow:</p>
                                <p>PyTorch: Please select <b>PyTorch</b> in the engine selection dropdown and uncomment the <b>second modelUrl</b>. </p>
                                <p>TensorFlow: Please select <b>TensorFlow</b> in the engine selection dropdown and uncomment the <b>third modelUrl</b>. </p>
                                <p>Use <b>Get Template</b> to test the code in your local machine.</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="row">
                    <div class="col s10 offset-s1 blue-grey darken-4">
                        <textarea id="editor"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="col s3 offset-s2">
                        <a class="waves-effect waves-light btn" onclick="submitCode()"><i class="material-icons left">cloud</i>run</a>
                    </div>
                    <div class="col s3">
                        <a class="waves-effect waves-light btn" onclick="getTemplate()"><i class="material-icons left">file_download</i>get
                            Template</a>
                    </div>
                    <div class="col s2">
                        <select class="browser-default" id="engine">
                            <option value="mxnet" selected>Engine: MXNet</option>
                            <option value="pytorch">Engine: PyTorch</option>
                            <option value="tensorflow">Engine: TensorFlow</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <p class="col s10 offset-s1">Output</p>
                    <div class="col s10 offset-s1 blue-grey darken-4 z-depth-5">
                        <textarea id="result"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="card z-depth-5">
            <div class="section">
                <div class="row center">
                    <h5 class="header col s12 light">Want to know more?</h5>
                </div>
                <div class="row center">
                    <a href="https://github.com/aws-samples/djl-demo"
                       class="btn-large waves-effect waves-light light-blue accent-2 pulse">Checkout our repository</a>
                </div>
            </div>
        </div>
    </div>
    <footer class="page-footer grey darken-3">
        <div class="container">
            <div class="row">
                <div class="col l6 s12">
                    <h5 class="white-text">About Us</h5>
                    <p class="grey-text text-lighten-4">Built with <span style="color: red;">&hearts;</span> for the
                        Java
                        community by your friends at AWS</p>
                </div>
            </div>
        </div>
        <div class="footer-copyright">
            <div class="container">
                Copyright 2020 <a class="brown-text text-lighten-3" href="http://aws.amazon.com/">Amazon.com, Inc.</a>
                or
                its
                affiliates. All Rights Reserved.
            </div>
        </div>
    </footer>
</div>

<!--  Scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://djl.ai/website/js/init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.js"></script>
<script src="https://djl.ai/website/js/terminal.js"></script>
<script src="https://djl.ai/website/js/doodle_draw.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/mode/clike/clike.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/addon/edit/matchbrackets.min.js"></script>
<script src="https://djl.ai/website/js/blockrunner.js"></script>

<div class="sidenav-overlay"></div>
<div class="drag-target"></div>
<div class="sidenav-overlay"></div>
<div class="drag-target"></div>
</body>
</html>
